<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <div v-if="ishistorshow">
        <span @click="$emit('clear-history')">全部删除</span>
        &nbsp;&nbsp;
        <span @click="ishistorshow = false">完成</span>
      </div>
      <van-icon name="delete" v-else @click="ishistorshow = true"/>
    </van-cell>
    <van-cell
    :title="item"
    v-for="(item, index) in searchHistories"
    :key="index"
    @click="onHistoryClick(item, index)"
    >
      <van-icon
      name="close"
      v-show="ishistorshow"/>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'SearchHistory',
  data () {
    return {
      ishistorshow: false // 控制图标的显示
    }
  },
  props: {
    searchHistories: {
      type: Array,
      required: true
    }
  },
  methods: {
    onHistoryClick (item, index) {
      // 判断是否删除状态
      // 是删除状态,则执行删除
      if (this.ishistorshow) {
        this.searchHistories.splice(index, 1)
      } else {
        // 否则执行搜索操作
        this.$emit('search', item)
      }
    }
  }

}
</script>

<style>

</style>
